import React from "react";
import { Text,View,StyleSheet,FlatList,RefreshControl,ActivityIndicator } from "react-native";

const CITY_NAME = [{key: 'a'}, {key: 'b'},{key: 'c'},{key: 'd'}];
export default class FlatListDemo extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isLoading:false,
            dataArray:CITY_NAME,
        }
    }
    _renderItem = (data)=>{
        return (
            <View style={ styles.item }>
                <Text style={ styles.text }>{data.key}</Text>
            </View>
        )
    };
    //加载数据
    loadData(refreshing){
        if(refreshing){  //下拉加载
            this.setState({
                isLoading:true,
            });
        }
        setTimeout(()=>{
            let dataArray = [];
            if(refreshing){
                for(let i=this.state.dataArray.length-1;i>=0;i--){
                    dataArray.push(this.state.dataArray[i]);
                }
            }else{
                dataArray = this.state.dataArray.concat(CITY_NAME);
            }
           this.setState({
               dataArray:dataArray,
               isLoading:false,
           })
        },2000)
    }
    //上拉刷新
    genIndicator(){
        return (
            <View style={ styles.indicatorContainer }>
                <ActivityIndicator
                    style={ styles.indicator }
                    size={'large'}
                    color={'red'}
                    animating={true}
                />
                <Text style={styles.footerText}>正在加载更多</Text>
            </View>
        )
    }
    render(){
        return (
            <View style={ styles.container }>
                <FlatList
                    data={this.state.dataArray}
                    renderItem={({item}) => this._renderItem(item)}
                    refreshControl={
                        <RefreshControl
                            title={"Loading"}
                            colors={['red']}
                            refreshing={ this.state.isLoading }
                            onRefresh={()=>{
                                this.loadData(true);
                            }}
                        />
                    }
                    ListFooterComponent={()=>this.genIndicator()}
                    onEndReached={()=>{
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
   container:{
       flex:1,
   },
    item:{
        backgroundColor:'black',
        height:200,
        marginRight:15,
        marginLeft: 15,
        marginBottom: 15,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text:{
        color:'white',
        fontSize:20,
    },
    indicatorContainer:{
        alignItems: 'center',
    },
    indicator:{
        color:'red',
        margin:10,
    },
    footerText:{
       marginBottom: 10,
    }
});